<template>
  <!-- <div style="height: 440px;"> -->
  <div style="padding-bottom: 22px;">  
    <div class="fontWeight biaoti">完税统计<el-tooltip class="item" effect="dark" content="只支持查询一年内的数据" placement="right"><i class="el-icon-question tipQuestion"></i></el-tooltip></div>
    <div class="flex flex-end mt20 mb94">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item prop="companyIds">
              <el-select style="width:200px" v-model="queryParams.companyIds" multiple collapse-tags placeholder="请选择客户企业" clearable filterable>
                <el-option
                  v-for="dict in clientEnterpriseOptions"
                  :key="dict.id"
                  :label="dict.companyName"
                  :value="dict.id"

                />
              </el-select> 
            </el-form-item>
            <el-form-item prop="startMonth">
              <el-date-picker
              style="width:120px"
              v-model="queryParams.startMonth"
              type="month"
              value-format="yyyyMM"
              placeholder="开始日期"
              :editable="false"
              :clearable="false"
              :picker-options="pickerOptions"
              >
              </el-date-picker>
          </el-form-item>
          <el-form-item>-</el-form-item>
            <!-- <span style="padding:7px 5px">-</span>:picker-options="pickerOptions"-->
          <el-form-item prop="endMonth">
              <el-date-picker
              style="width:120px"
              v-model="queryParams.endMonth"
              type="month"
              value-format="yyyyMM"
              placeholder="结束日期"
              :editable="false"
              :clearable="false"
              :picker-options="pickerOptions"
              >
              </el-date-picker>
          </el-form-item>
          <el-form-item>
            <!-- <el-button type="primary" icon="el-icon-search" size="medium" @click="handleQuery" style="padding:10px">搜索</el-button> -->
            <el-button icon="el-icon-search" size="medium" @click="handleQuery"  style="padding:10px">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    </div>
    <!-- <div style="height:200px;width:100%" id="myChart_pie"></div> -->
    <div class="flex flex-direction align-items-center">
      <el-progress type="dashboard" :percentage="percentage" :color="colors" :stroke-width="10" style="font-weight:bold;"></el-progress>
      <div class="font14 mb30 text-muted mt-15">完税金额</div>
    </div>
    <div class="flex justify-content">
      <div>
        <p class="p1">总申报额（{{ totalMoneyDW }}元）</p>
        <p class="p2">{{ totalMoney }}</p>
        <!-- <count-to :start-val="0" :end-val="getDatacenterDeclareData.totalMoney/10000" :duration="2600" class="p2" /> -->
      </div>
      <div>
        <p class="p1">完税金额（{{ completeMoneyDW }}元）</p>
        <p class="p2">{{ completeMoney }}</p>
        <!-- <count-to :start-val="0" :end-val="getDatacenterDeclareData.completeMoney" :duration="3000" class="p2" /> -->
      </div>
      <div>
        <p class="p1">失败金额（{{ failMoneyDW }}元）</p>
        <p class="p2">{{ failMoney }}</p>
        <!-- <count-to :start-val="0" :end-val="getDatacenterDeclareData.failMoney" :duration="3200" class="p2" /> -->
      </div>
      <div>
        <p class="p1">未申报（{{ notMoneyDW }}元）</p>
        <p class="p2">{{ notMoney }}</p>
        <!-- <count-to :start-val="0" :end-val="getDatacenterDeclareData.notMoney" :duration="3600" class="p2" /> -->
      </div>
    </div>
    <!-- <div :class="className" :style="{height:height,width:width}" /> -->
    
    </div>
</template>

<script>
// import echarts from 'echarts'
// import 'echarts-liquidfill/src/liquidFill.js';
// require('echarts/theme/macarons') // echarts theme
// import resize from './mixins/resize'
// import CountTo from 'vue-count-to'
import { datacenterDeclareData } from "@/api/index";
export default {
  // components: {
  //   CountTo
  // },
  // mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '300px'
  //   }
  // },
  data() {
    return {
      percentage: 0,
      colors:'#045aff',
      //getDatacenterDeclareData: {},
      totalMoney:0,
      totalMoneyDW:'',
      completeMoney:0,
      completeMoneyDW:'',
      failMoney:0,
      failMoneyDW:'',
      notMoney:0,
      notMoneyDW:'',
      
      queryParams: {
        companyIds: undefined,
        startMonth: undefined,
        endMonth: undefined,
      },
      pickerOptions: {
          disabledDate: (time) => {
            let curDate = (new Date()).getTime();
            let twelve = 365 * 24 * 3600 * 1000;
            let twelveMonths = curDate - twelve;
            return time.getTime() > Date.now() || time.getTime() < twelveMonths;
          },
      },
      clientEnterpriseOptions: [] // 所有客户企业下拉列表信息数据字典数据
    }
  },
  mounted() {
    this.getList()
  },
  created() {
    this.getClientEnterprise().then(response => {
      this.clientEnterpriseOptions = response.data;
    });
    this.getmonthValue();
    this.getmonthValue1();
  },
  methods: {
    getmonthValue(){
      var data = new Date()
      var year = data.getFullYear();
      var month = data.getMonth() - 1;
      if (month < 10) month = '0' + month
      var toMonth = year + '' + month
      this.queryParams.startMonth = toMonth
    },
    getmonthValue1(){
      var data = new Date()
      var year = data.getFullYear();
      var month = data.getMonth();
      if (month < 10) month = '0' + month
      var toMonth = year + '' + month
      this.queryParams.endMonth = toMonth
    },
    getList() {
       datacenterDeclareData(this.queryParams).then((response) => {
        //this.totalMoney = response.data.totalMoney
        //this.completeMoney = response.data.completeMoney
        //this.failMoney = response.data.failMoney
        //this.notMoney = response.data.notMoney
        if (response.data.totalMoney >= 100000000) {
          this.totalMoney = parseFloat(response.data.totalMoney / 100000000).toFixed(2);
          this.totalMoneyDW = '亿';
        } else if (response.data.totalMoney >= 10000) {
          this.totalMoney = parseFloat(response.data.totalMoney/10000).toFixed(2);
          this.totalMoneyDW = '万';
        } else {
          this.totalMoney = response.data.totalMoney;
        }

        if (response.data.completeMoney >= 100000000) {
          this.completeMoney = parseFloat(response.data.completeMoney / 100000000).toFixed(2);
          this.completeMoneyDW = '亿';
        } else if (response.data.completeMoney >= 10000) {
          this.completeMoney = parseFloat(response.data.completeMoney/10000).toFixed(2);
          this.completeMoneyDW = '万';
        } else {
          this.completeMoney = response.data.completeMoney;
        }

        if (response.data.failMoney >= 100000000) {
          this.failMoney = parseFloat(response.data.failMoney / 100000000).toFixed(2);
          this.failMoneyDW = '亿';
        } else if (response.data.failMoney >= 10000) {
          this.failMoney = parseFloat(response.data.failMoney/10000).toFixed(2);
          this.failMoneyDW = '万';
        } else {
          this.failMoney = response.data.failMoney;
        }

        if (response.data.notMoney >= 100000000) {
          this.notMoney = parseFloat(response.data.notMoney / 100000000).toFixed(2);
          this.notMoneyDW = '亿';
        } else if (response.data.notMoney >= 10000) {
          this.notMoney = parseFloat(response.data.notMoney/10000).toFixed(2);
          this.notMoneyDW = '万';
        } else {
          this.notMoney = response.data.notMoney;
        }
        this.percentage = response.data.rate
      }).catch(()=>{}); 
    },
    handleQuery() {
      this.getList();
    },
    // initChart() {
      
    // }
  }
}
</script>
<style scoped lang="scss">
    p{
      text-align: center;
    }
    p.p1{
      font-size: 14px;
      color: #333;
      line-height: 15px;
    }
    .p2{
      font-size: 16px;
      color: #045aff;
      font-weight: bold;
    }
    ::v-deep  .el-progress__text{
      font-size: 24px!important;
      color: #333;
    }
    @media screen and (max-width: 480px) {
      .mb94{
        margin-bottom:0;
      }
    }
</style>